<template>
    <div>
        <transition name='down'>
            <div v-show='!show' class="component-auth-step__button" @click='emitToggle'><i class="iconfont icon-arrow"></i></div>
        </transition>
        <modal
            class='component-auth-step'
            mode='top-no-fade'
            :show='show'
            @close='emitClose'>
            <div class="component-auth-step__box">
                <h1 class='component-auth-step__title'>提示</h1>
                <p class='component-auth-step__intro' v-if='title=="contact"'>请完成以下步骤，证明个人信息真实有效</p> 
                <p class='component-auth-step__intro' v-else>为保证借贷安全，请在出借和借款前按顺序完成以下两步认证。</p> 
                <ul v-if='mode=="all"'>
                    <li class='component-auth-step__item'>
                        <div class="left">
                            <span>第一步：实名认证</span>
                        </div>
                        <span
                            class="button short"
                            :class='{disabled : hasRealName}'
                            @click='goRouter("user-bind-card-verified")'>
                                <template v-if='!hasRealName'>去认证</template>
                                <template v-else>已认证</template>
                            </span>
                    </li>
                    <li class='component-auth-step__item'>
                        <div class="left">
                            <span>第二步：信用报告认证</span>
                        </div>
                        <span
                            class="button short"
                            :class='{disabled : hasAuth}'
                            @click='goRouter("user-credit-report-index")'>
                                <template v-if='!hasAuth'>去认证</template>
                                <template v-else>已认证</template>
                            </span>
                    </li>
                </ul>
                <ul v-if='mode=="bank"'>
                    <li class='component-auth-step__item'>
                        <div class="left">
                            <span>请先完成实名认证</span>
                        </div>
                        <span
                            class="button short"
                            :class='{disabled : hasRealName}'
                            @click='goRouter("user-bind-card-verified")'>
                                <template v-if='!hasRealName'>去认证</template>
                                <template v-else>已认证</template>
                            </span>
                    </li>
                </ul>
            </div>
            <div class="component-auth-step__button bottom" @click='emitToggle'><i class="iconfont icon-arrow"></i></div>
        </modal>
    </div>
</template>

<script>
    import modal from './Modal.vue'
    import buttonLoading from './ButtonLoading.vue'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        props:{
            loading:{
                type: Boolean,
                default: false
            },
            mode:{
                type: String,
                default:'all'
            },
            action:{
                type: String,
                default:''
            },
            title:{
                type: String,
                default:'all'
            },
            maskClose:{
                type: Boolean,
                default:true
            },
            tips:{
                type: String,
                default:''
            },
            title:{
                type: String,
                default:''
            },
            show:{
                type: Boolean,
                required: true,
            },
            closeText:{
                type: String,
                default: '取消',
            },
            confirmText:{
                type: String,
                default: '确定',
            }
        },
        data() {
            return {

            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            hasRealName(){
                return this.userInfo.user && this.userInfo.user.validState == 'OK'
            },
            hasAuth(){
                return !this.userInfo.noZmxy && !this.userInfo.noOperators
            },
        },
        methods:{
            goUserBindCardVerified(){
                if(this.userInfo.user && this.userInfo.user.validState == 'OK' ){
                    this.$router.push({
                        name:'user-bind-card-list'
                    })
                    return
                }
                this.$router.push({
                    name:'user-bind-card-verified',
                    query:{
                        from:'user-mine'
                    }
                })
            },
            goRouter(name){
                this.$router.push({
                    name:name,
                    query:{
                        action:this.action
                    }
                })
            },
            emitClose(){
                this.$emit('close')
            },
            emitToggle(){
                this.$emit('toggle')
            },
            emitConfirm(){
                this.$emit('confirm')
            }
        },
        components:{ modal, buttonLoading }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-auth-step{
        .component-modal__container{
            overflow:initial;
        }
        .component-modal__main{
            position: relative;
            padding: 0;
        }
    }
    .component-auth-step__box{
        text-align: center;
        position: relative;
        z-index:2;
        padding:24px 24px 10px 24px;
        background-color: #fff;
    }
    .component-auth-step__button{
        position: absolute;
        width: 48px;
        height: 48px;
        top:-24px;
        left:50%;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items:center;
        background-color: #fff;
        margin-left:-24px;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.12), 0 8px 8px 0 rgba(0,0,0,0.12);
        &.bottom{
            top:auto;
            bottom:-24px;
            box-shadow:none;
            .iconfont{
                transform:rotate(-90deg);
            }
        }
        .iconfont{
            position: absolute;
            left:50%;
            margin-left:-8px;
            font-size: 16px;
            width: 16px;
            height:16px;
            line-height: 16px;
            transform:rotate(90deg);
            bottom:7px;
        }

    }
    .component-auth-step__intro{
        @extend %font-body1;
        text-align: left;
    }
    .component-auth-step__item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:16px 0;
        border-bottom:1px solid $sectionColor;
        &:last-child{
            border-bottom:none;
        }
        .left{
            flex:1;
            text-align: left;
            padding-right: 10px;
            span{
                display: block;
                @extend %font-body1;
                color:$importColor;
            }
            p{
                @extend %font-caption;
            }
        }
    }
    .component-auth-step__title{
        @extend %font-title;
        color:$importColor;
        padding-bottom: 16px;
    }
</style>


